<template>
  <div class="top" id="topEcharts2"></div>
</template>

<script>
export default {
  name: 'topEcharts2',
  props: {
    topEchartsData2: {
      type: [Object, Array]
    }
  },
  data() {
    return {

    };
  },
  created() {
  },
  mounted() {
    setTimeout(() => { // 弹框嵌套图表-请求数据有延迟
      this.topEcharts();
    }, 500);
  },
  methods: {
    // 深拷贝
    deepCopy(obj) {
      var tempTool = Array.isArray(obj) ? [] : {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          tempTool[key] = typeof obj[key] === 'object'
            ? this.deepCopy(obj[key])
            : Array.isArray(obj) ? Array.prototype.concat(obj[key]) : obj[key];
        }
      }
      return tempTool;
    },
    // 图表数据
    topEcharts() {
      let options = this.deepCopy(this.topEchartsData2);
      console.log(options);
      let leftChart = this.$echarts.init(document.getElementById('topEcharts2'));
      leftChart.setOption({
        // title: {
        //   text: '素质能力',
        //   left: 'center',
        //   top: 'bottom',
        //   textStyle: {
        //     fontSize: 14
        //   }
        // },
        xAxis: {
          type: 'category',
          // data: ['数据库熟练度', 'JAVA熟练度', '架构熟练度', '素质能力', '规范能力', '完成度', '执行能力', '管理能力', '沟通能力'],
          data: options.map(function (item) {
            return item.evaluationDetailItemName;
          }),
          axisLabel: {
            rotate: 45
          },
          name: '分项'
        },
        yAxis: {
          type: 'value',
          max: 500,
          name: '分值'
        },
        series: [
          {
            // data: [80, 50, 62, 79, 44, 50, 62, 16, 20],
            data: options.map(function (item) {
              return item.sum;
            }),
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#EBF9FC'
            },
            barWidth: 5,
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#39C3E2', '#39C3E2', '#39C3E2', '#39C3E2', '#39C3E2', '#39C3E2', '#39C3E2', '#39C3E2', '#39C3E2'];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#39C3E2'
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.top {
  margin: 0 auto;
  width: 100%;
  height: 90%;
}
</style>
